!JObj.Plugin && (JObj.Plugin = {});

JObj.use('JAnimate');
JObj.use('JModalLayer');
JObj.plugin('JTrackBar');

JObj.Plugin.JSlideShow = {};

(function($){

    var vars = {
        created:false,
        skinloaded:false,
        normals:[],
        descs:[],
        idx:0,
        showAreaWidth:100,
        showAreaHeight:100
    };

    var objs = {
        ml:JObj.UI.JModalLayer,
        tb:null,
        outline:null,
        panelOutline:null,
        panel:null,
        btnArea:null,
        btnPre:null,
        btnNext:null,
        btnPlay:null,
        btnOrg:null,
        btnList:null,
        btnClose:null,
        showArea:null,
        body: (document.compatMode == 'CSS1Compat' ? document.documentElement : document.body),
        ani:null
    };

    var tb_changecomplete = function(pos){
    	var idx = Math.round(pos);
    	if(idx != vars.idx) $.show(idx);
    }
    
    var create = function(){
        var fp = document.createDocumentFragment();
        
        objs.outline = JObj.$c('DIV');
        //objs.ml.getLayer().appendChild(objs.outline);
        fp.appendChild(objs.outline);
        objs.outline.className = 'JSlideShowDefault';

        objs.showArea = JObj.$c('DIV');
        objs.outline.appendChild(objs.showArea);
        objs.showArea.className = 'showArea';

        var t = (objs.body.clientHeight - vars.showAreaHeight) / 2 + objs.body.scrollTop;
        var l = (objs.body.clientWidth - vars.showAreaHeight) / 2 + objs.body.scrollLeft;
        JObj.css(objs.showArea,{top:t,left:l});

        objs.panelOutline = JObj.$c('DIV');
        objs.outline.appendChild(objs.panelOutline);
        objs.panelOutline.className = 'panelOutline';

        objs.panel = JObj.$c('DIV');
        objs.panelOutline.appendChild(objs.panel);
        objs.panel.className = 'panel';

        objs.tb = JObj.Plugin.JTrackBar.getInstance('H',183,objs.panel);
        objs.tb.create();
		objs.tb.setDivision(0,vars.normals.length - 1);
		objs.tb.onChangeComplete = tb_changecomplete;

        objs.btnArea = JObj.$c('UL');
        objs.panel.appendChild(objs.btnArea);
        objs.btnArea.className = 'btnArea';

        var t = JObj.$c('LI');
        objs.btnArea.appendChild(t);
        t.className = 'btnPre';
        objs.btnPre = JObj.$c('A');
        t.appendChild(objs.btnPre);
        objs.btnPre.href="javascript:void(0)";
        objs.btnPre.onclick = JObj.doFunction($.pre);
		objs.btnPre.innerHTML = '&nbsp;';

        var tt = t.cloneNode(true);
        objs.btnArea.appendChild(tt);
        tt.className = 'btnPlay';
        objs.btnPlay = tt.firstChild;

        t = t.cloneNode(true);
        objs.btnArea.appendChild(t);
        t.className = 'btnNext';
        objs.btnNext = t.firstChild;
        objs.btnNext.onclick = JObj.doFunction($.next);

        tt = t.cloneNode(true);
        objs.btnArea.appendChild(tt);
        tt.className = 'btnOrg';
        objs.btnOrg = tt.firstChild;
        objs.btnOrg.href = "#";
        objs.btnOrg.target = '_blank';
		
        tt = t.cloneNode(true);
        objs.btnArea.appendChild(tt);
        tt.className = 'btnList';
        objs.btnList = tt.firstChild;		

        tt = t.cloneNode(true);
        objs.btnArea.appendChild(tt);
        tt.className = 'btnClose';
        objs.btnClose = tt.firstChild;
        objs.btnClose.onclick = JObj.doFunction($.close);


        objs.ml.getLayer().appendChild(fp);
        vars.created = true;
    }
    
    
    /**
     * arr = [
     *  {icon:path | null,normal:path,desc:description | null,link:href | null},
     *  {icon:path | null,normal:path,desc:description | null,link:href | null},
     *  ....
     * ];
     * @param arr
     */
    $.bind = function(rules){
        var rule,i;
        for(i=0;rule=rules[i];i++){
            //vars.icons.push(rule.icon);
            vars.normals.push(rule.normal);
            vars.descs.push(rule.desc);
        }
        
        if(objs.tb)
        	objs.tb.setDivision(1,rules.length);
    }
    
    var img_loaded = function(){
    	//IE下，每个图片（不是 img 这个图片）只触发一次 onload,如果图片以下载完成，第二次某个 img 在使用它的时候，这个事件就不会在执行了。
    	//img.complete 为 true 的时候，说明这个图片以载入。
        if(arguments.length == 1 || arguments.length == 0)// IE arguments.length = 0 , FF arguments.length = 1;
    		var img = this;
    	else
    		var img = arguments[1];
    	
		if(JObj.Browser.ie /*&& JObj.Browser.version <= 6*/){
			var maxW = objs.body.clientWidth - 100;
			var maxH = objs.body.clientHeight - 250;
			if(img.width > maxW){
				img.height = maxW / img.width * img.height;
				img.width = maxW;
			}
			if(img.height > maxH){
				img.width = maxH / img.height * img.width;
				img.height = maxH;
			}
		}
    	
		var s1 = {w:objs.body.clientWidth,h:objs.body.clientHeight};
		var s2 = {w:img.width,h:img.height};
		
		var t = (s1.h - s2.h) / 2 + objs.body.scrollTop;
		var l = (s1.w - s2.w) / 2 + objs.body.scrollLeft;
		
		//objs.showArea.style.marginTop = t - 30 + 'px';
		objs.showArea.className = 'showArea showAreaNoBg';
		
		if(objs.ani != null){
			objs.ani.abort();
		}else{
			objs.ani = JObj.UI.JAnimate.$(objs.showArea);
		}
		
		objs.ani.runFromCurrent({width:img.width,height:img.height,top:t - 30,left:l});
    }

    var ie6_fix_panelOutline_top = function(){
        return (objs.body.scrollTop + objs.body.clientHeight - 10 - objs.panelOutline.clientHeight) + 'px';
    }

    $.show = function(idx){

        if(!vars.skinloaded){
            JObj.Loader.loadCss(JObj.path + '/plugins/JSlideShow/default/skin.css');
            JObj.Style.addRule('.JSlideShowDefault .showArea img','max-width:' + (objs.body.clientWidth - 100) + 'px;max-height:' + (objs.body.clientHeight - 250) + 'px');
            vars.skinloaded = true;
        }

        objs.ml.show();
        if(!vars.created) create();

        if(JObj.Browser.ie && JObj.Browser.version <= 6){
            JObj.Style.addRule('.JSlideShowDefault','height:' + objs.body.clientHeight + 'px');
            JObj.Style.addRule('.JSlideShowDefault .panelOutline','position:absolute;top:' + (objs.body.scrollTop + objs.body.clientHeight - 10 - Math.max(objs.panelOutline.clientHeight,70)) + 'px',true);
            //objs.panelOutline.style.setExpression('top',ie6_fix_panelOutline_top);
        }        

        objs.showArea.className = 'showArea';
        objs.showArea.innerHTML = "";

        var t = (objs.body.clientHeight - vars.showAreaHeight) / 2 + objs.body.scrollTop;
        var l = (objs.body.clientWidth - vars.showAreaHeight) / 2 + objs.body.scrollLeft;

		if(objs.ani != null){
			objs.ani.abort();
		}else{
			objs.ani = JObj.UI.JAnimate.$(objs.showArea);
		}
		objs.ani.runFromCurrent({width:vars.showAreaWidth,height:vars.showAreaHeight,top:t - 30,left:l}); 
		
        if(JObj.Browser.ie && JObj.Browser.version <= 6)
            setTimeout(JObj.doFunction(_show,idx),0);//ie6 下，onload 事件非得这样写才能按设计触发。
        else
            _show(idx);
    }

    var _show = function( idx ){        
        var img = new Image();
        img.onload = img_loaded;
        img.src = vars.normals[idx];
        objs.showArea.appendChild(img);

/*        if(img.complete){
        	img_loaded(null,img);
        }*/
        
        vars.idx = idx;
        objs.btnOrg.href = vars.normals[vars.idx];
        objs.tb.setPosition(idx);
    }

    $.pre = function(){
    	vars.idx--;
    	if(vars.idx < 0) vars.idx = vars.normals.length - 1;
    	$.show(vars.idx);
    }
    
    $.next = function(){
    	vars.idx++;
    	if(vars.idx >= vars.normals.length) vars.idx = 0;
    	$.show(vars.idx);
    }
    
    $.close = function(){
    	objs.ml.hidden();
    }
})(JObj.Plugin.JSlideShow);